
// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="submit" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

//渲染列表
function render() {
  axios({
      method:'GET',
      url:"http://api-breakingnews-web.itheima.net/my/article/cates",
      headers:{
          Authorization:localStorage.getItem('token')
      }
  }).then(({data:res})=>{
  //     console.log(res)
      //判断请求成功
      if(res.status===0){
        $('tbody').empty()
          res.data.forEach(obj=>{
            const theTr = `<tr>
            <td>${obj.name}</td>
            <td>${obj.alias}</td>
            <td>
              <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
        
              <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
            </td>
          </tr>`
          $('tbody').append(theTr)
          })
      }
  })
}
render()

//删除功能
$('tbody').on('click','.delete',function () {
   const Id = $(this).attr('myid')
   axios({
     method:'GET',
     url:`http://api-breakingnews-web.itheima.net/my/article/deletecate/${Id}`,
     headers:{
      Authorization:localStorage.getItem('token')
  },
   }).then(({data:res})=>{
    console.log(res)
    layer.msg(res.message)
    if(res.status === 0){
      render()
    }
   })
})


// 编辑功能
$('tbody').on('click','.edit',function () {
 const name = $(this).attr('data-name')
 const alias = $(this).attr('data-alias')

 const Id = $(this).attr('myid')
 let index = layer.open({
  type: 1, 
  title:'编辑类别',
  area:['500px','300px'],
  content: edit_str, //这里content是一个普通的String
  success:function () {

    layui.form.val('edit',{
       name,alias,Id
     })
     $('form').on('submit',function (e) {
        e.preventDefault()
      axios({
        method:'POST',
        url:'http://api-breakingnews-web.itheima.net/my/article/updatecate',
        headers:{
          Authorization:localStorage.getItem('token')
      },
      data:$('form').serialize()

      }).then(({data:res})=>{
       layer.close(index)
        render()
      })


      })


  }
});


})


//添加功能
$('.add').on('click',function () {

     let index = layer.open({
    type: 1, 
    title:'添加类别',
    area:['500px','300px'],
    content: add_str, //这里content是一个普通的String
    success:function () {
       $('.add-form').on('submit',function (e) {
          e.preventDefault()
          axios({
            method:'POST',
            url:'http://api-breakingnews-web.itheima.net/my/article/addcates',
            headers:{
              Authorization:localStorage.getItem('token')
          },
            data: $('.add-form').serialize()
          }).then(({data:res})=>{
            layer.msg(res.message)
            if(res.status === 0){
              layer.close(index)
              render()
            }
          })
       })
    }
  });
})


// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;


// 类别判断

layui.form.verify({
    ctname: [
        /^[\u4E00-\u9FA5]+$/,
        "分类名只能是中文"
    ],
    aliname: [
        /^[a-z0-9]+$/,
        "小写英文和数字组成"
    ]
}) 

